<template>
  <div class="integral flex flex-column">
    <van-nav-bar title="积分明细" left-text="返回" left-arrow @click-left="onClickLeft" :right-text="`总积分:${integral_sum}`" />
    <div class="integral-list flex-1">
      <van-cell-group inset>
        <van-field center clearable label="" placeholder="请输入会员ID">
          <template #button>
            <van-button size="mini" type="primary">查询</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div class="integral-item flex" v-for="integral in integral_list" :key="integral.id">
        <div class="integral-main flex-1">
          <div class="integral-content flex flex-content-between">
            <div>{{integral.txId}}</div>
            <div class="more flex flex-center">+{{integral.amount}}积分</div>
          </div>
          <!-- <div class="integral-content flex flex-content-between">
            <div>抖音<van-divider vertical />14789945242</div>
          </div> -->
          <!-- <div class="integral-sub-content">抖音：14789945242{{ item }}</div> -->
          <div class="integral-bottom flex flex-content-between">
            <div class="time">
              {{ integral.platformName }}<van-divider vertical />{{ integral.userName }}<van-divider vertical />{{integral.ctime}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" name="ChildView" setup>
import { getCurrentInstance } from '@vue/runtime-core'

import { inject, ref } from 'vue'
const $ajax: any = inject('$ajax')
const $api: any = inject('$api')
const currentInstance: any = getCurrentInstance()
let type_dict: any = ref({
"ORDER":"做单",
"WITHDRAW":"提现",
"ORDER_AGENT":"抽成"
})
let integral_list: any = ref([])
let integral_sum: any = ref(0)

async function get_order_list() {
  const data = await $ajax({
    api: $api.integral_list
  })
  integral_list.value = data.data.list
  integral_sum.value=data.data.sum
}
get_order_list()
//返回
const onClickLeft = () => {
  history.back()
}
</script>
<style lang="less" scoped>
.integral {
  height: 100%;
  font-size: 0.16rem;
  .integral-list {
    overflow: auto;
    :deep(.van-cell-group) {
      margin-left: 0;
      .van-field__control {
        border: 1px solid #bfbfbf;
        padding-left: 0.14rem;
        border-radius: 0.06rem;
        width: 60%;
        max-width: 2rem;
      }
    }
    .sum{
      font-size: .14rem;
      padding-left: .14rem;
      color: #4e7dff;
    }
    .integral-item {
      height: 0.64rem;
      background: #fff;
      padding: 0.06rem;
      margin-top: 0;
      &:not(last-child) {
        border-bottom: 1px solid #e2eeff;
      }
      // &:last-child{
      //   border-bottom: 0
      // }
      .integral-icon {
        width: 0.45rem;
        font-size: 0.18rem;
        color: #628cff;
        img {
          width: 100%;
        }
      }
      .integral-main {
        padding: 0 0.12rem;
        .integral-content {
          font-size: 0.14rem;
          :deep(.van-tag) {
            font-size: 0.12rem;
            border: 0;
            border-radius: 0.06rem;
            padding: 0 0.06rem;
            line-height: 0.12rem;
          }
        }
        .more {
          // width: 0.78rem;
          // height: 0.26rem;
          flex-shrink: 0;
          border-radius: 0.34rem;
          // background: linear-gradient(99deg, #f1f4ff 1.64%, #e1e7fe 27%, #d5ebff 98.52%);
          color: #4e7dff;
          font-family: 'PingFang SC';
          font-size: 0.12rem;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }
        .integral-bottom {
          margin-top: 0.06rem;
          .time {
            color: #bfbfbf;
            font-size: 0.13rem;
            :deep(i) {
              margin-right: 0.03rem;
            }
            :deep(.van-divider--vertical) {
              margin: 0 0.04rem;
              border-color: #bfbfbf;
            }
          }
        }
      }
    }
  }
}
</style>
